<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from "cesium";
import CesiumVue3Popover from "./CesiumVue3Popover/CesiumVue3Popover";
import LeftSlot from "./LeftSlot.vue";
import RightSlot from "./RightSlot.vue";
const init = () => {
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件 全部关闭
    timeline: false, // 时间轴控件
    animation: false, // 动画控件
    geocoder: false, // 搜索按钮
    homeButton: false, // 主页按钮
    sceneModePicker: false, // 投影方式按钮
    baseLayerPicker: false, // 图层选择按钮
    navigationHelpButton: false, // 帮助手势按钮
    fullscreenButton: false, // 全屏按钮
  });
  // 新增高德影像
  viewer.scene.imageryLayers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
      url: `https://webst0{s}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}&lang=zh_cn&size=1`,
      subdomains: ["1", "2", "3", "4"], // 如果有多个子域名用于负载均衡，可以在这里指定
      tilingScheme: new Cesium.WebMercatorTilingScheme(),
      minimumLevel: 3,
      maximumLevel: 18, // 根据高德地图的实际最大层级设置
    })
  );
  addBillbroad(viewer); // 新增物体
  setCameraPosition(viewer); // 设置相机初始位置
  /** STATR ---------------------------------------------------- */
  // 定义左键弹出层
  const customLeftPopover = new CesiumVue3Popover({
    viewer: viewer, // cesium viewer
    slotComponent: LeftSlot, // vue3 组件，插槽
    slotId: "custom-left-slot", // 子节点id
    parentDomId: "cesiumContainer", // 需要挂载的父节点 id
    cesiumEventType: Cesium.ScreenSpaceEventType.LEFT_CLICK, // 需要注册cesium的事件 左键单击事件
  });
  
  // const customRightPopover = new CesiumVue3Popover({
  //   viewer: viewer, // cesium viewer
  //   slotComponent: RightSlot, // vue3 组件，插槽
  //   slotId: "custom-right-slot", // 子节点id
  //   parentDomId: "cesiumContainer", // 需要挂载的父节点 id
  //   cesiumEventType: Cesium.ScreenSpaceEventType.RIGHT_CLICK, // 需要注册cesium的事件 左键单击事件
  // });

  // 取消右键浏览器默认事件
  const parentDom = document.getElementById("cesiumContainer");
  parentDom.addEventListener("contextmenu", (e) => {
    console.log('取消右键浏览器默认事件')
    e.preventDefault();
  });
  /** END ---------------------------------------------------- */
};

//设置相机初始位置
function setCameraPosition(viewer) {
  // 设置初始位置  Cesium.Cartesian3.fromDegrees(longitude, latitude, height, ellipsoid, result)
  const boundingSphere = new Cesium.BoundingSphere(
    Cesium.Cartesian3.fromDegrees(114.30527350657182, 30.59595484998685, 0),
    100
  );
  // 定位到初始位置
  viewer.camera.flyToBoundingSphere(boundingSphere, {
    duration: 1, // 定位到初始位置的过渡时间，设置成0，就没有过渡，类似一个过场的动画时长
  });
}

function addBillbroad(viewer) {
  const list = [
    {
      position: [114.30527350657182, 30.59595484998685],
      name: "肖总",
    },
    {
      position: [114.36687292429713, 30.573724426095062],
      name: "花总",
    },
    {
      position: [114.26522916206015, 30.59026470545458],
      name: "小沈",
    },
  ];

  const entities = createBillboard(list);
  entities.forEach((item) => {
    viewer.entities.add(item);
  });
}
// 根据列表创建广告牌
function createBillboard(list) {
  const imageUrl = "/src/assets/image/position.png";
  return list.map((item) => {
    return {
      position: Cesium.Cartesian3.fromDegrees(
        item.position[0],
        item.position[1],
        0
      ),
      billboard: {
        image: imageUrl,
        color: Cesium.Color.RED,
        scale: 0.2,
      },
      label: {
        text: item.name,
        font: "20px",
        color: Cesium.Color.RED,
        pixelOffset: new Cesium.Cartesian2(0, -40),
        fillColor: Cesium.Color.BLUE,
        showBackground: false,
        backgroundColor: Cesium.Color.RED,
      },
    };
  });
}

onMounted(() => {
  init();
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
  /* 子盒子相对定位 */
  position: relative;
  /**子盒子超出隐藏 */
  overflow: hidden;
}
</style>
